<script setup lang="ts">
    import { ref, computed } from 'vue'
    import { useSideMenuStore } from '../stores/counter'
    import { useRouter, useRoute } from 'vue-router'
    import { routerList } from '../router/getAutoUrl'

    //菜单
    const handleOpen = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }

    const openInNewTab = (event: any) => {
        event.preventDefault(); // 阻止Vue Router的跳转
        event.stopPropagation(); // 阻止事件冒泡
        window.open(event.target.href, '_blank'); // 在新标签页打开链接
    };

    //路由
    const router = useRouter()
    const route = useRoute()

    const menuData: any[] = router.options.routes[0].children ?? [];
    routerList.forEach(item => {
        if (menuData.some(val => val.path !== item.path)) {
            menuData.push(item);
        };
    });
    // menuData.push(...routerList);
    //console.log('router-----',router.options.routes[0])
    // console.log('menuData-----',menuData, routerList)

    const sideStore = useSideMenuStore()

    const activeMenu = computed(() => {
        const { meta, path } = route;
        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu) {
            return meta.activeMenu;
        }
        return path;
    })

</script>
<template>
    <div class="side" :class="sideStore.isCollapse?'sub':'big'">
        <div class="logo">
            <h1>数字化煤场平台</h1>
        </div>
        <div class="firm">
            福建华电可门发电有限公司
        </div>
        <!---
        <ul class="side_nav">
            <li v-for="(item,index) in sideNavData" :class="sideIndex == index?'hover':''" :key="index">
                <div class="title" v-if="item.children.length == 0" @click="clickSideMenu(index)">
                    <img class="ico_m" :src="item.src" alt="">
                    <strong>{{ item.name }}</strong>
                </div>
                <div class="title" v-if="item.children.length != 0" @click="clickSideMenu(index)">
                    <img class="ico_m" :src="item.src" alt="">
                    <strong>{{ item.name }}</strong>
                    <el-icon class="icon"  color="#A6ACB5"><ArrowDown /></el-icon>
                </div>
                <div class="cont" v-if="item.children.length != 0 && sideIndex == index && sideStore.isCollapse">
                    <RouterLink v-for="(itema,indexa) in item.children" :to="itema.link" :class="sideSubIndex == indexa?'hover':''" @click="clickSideSubMenu(indexa)" :key="indexa">{{itema.name}}</RouterLink>
                </div>
            </li>
        </ul>
        --->

        <div class="side_menu">
            <el-menu
                :default-active="activeMenu"
                :router="true"
                :collapse="sideStore.isCollapse"
                :unique-opened="true"
                @open="handleOpen"
                @close="handleClose"
            >
                <template v-for="(itema,indexa) in menuData" :key="indexa">
                    <el-sub-menu v-if="itema.children && itema.children.length > 0" :index="itema.path">
                        <template #title>
                            <img class="ico_m" v-if="(itema?.meta?.icon as string | undefined)?.startsWith('ico_')" :src="`/coalyard/src/assets/img/${itema?.meta?.icon}.png`" alt="">
                            <img class="ico_m" v-else :src="(itema?.meta?.icon as string | undefined)" alt="">
                            <span>{{ itema.meta ? itema.meta.title : '' }}</span>
                        </template>
                        <template v-for="(itemb,indexb) in itema.children" :key="indexb">
                            <template v-if="itemb.meta && !itemb.hidden">
                                <el-sub-menu v-if=" itemb.children && itemb.children.length > 0 && itemb.meta && itemb.meta.breadcrumb" :index="itemb.path">
                                    <template #title>
                                        <span class="sub_nav">{{ itemb.meta ? itemb.meta.title : '' }}</span>
                                    </template>
                                    <template v-for="(itemc,indexc) in itemb.children" :key="indexc">
                                        <el-menu-item :index="itemc.path" v-if="!itemc.hidden">
                                            <span style="font-size: 15px;">{{ itemc.meta ? itemc.meta.title : '' }}</span>
                                        </el-menu-item>
                                    </template>
                                </el-sub-menu>
                                <el-menu-item v-else :index="itemb.path">
                                    <span class="sub_nav">{{ itemb.meta ? itemb.meta.title : '' }}</span>
                                </el-menu-item>
                            </template>
                        </template>
                    </el-sub-menu>
                    <el-menu-item v-else-if="!itema.hidden" :index="itema.path">
                        <img class="ico_m" v-if="(itema?.meta?.icon as string | undefined)?.startsWith('ico_')" :src="`/coalyard/src/assets/img/${itema?.meta?.icon}.png`" alt="">
                        <img class="ico_m" v-else :src="(itema?.meta?.icon as string | undefined)" alt="">
                        <span v-if="!itema.linkUrl || itema.linkUrl?.length === 0">{{itema.meta ? itema.meta.title : '' }}</span>
                        <a v-if="itema.linkUrl?.startsWith('http')" :href="itema.linkUrl" @click.prevent="openInNewTab" style="text-decoration: none; color: #a6acb5; outline: none;">{{itema.meta ? itema.meta.title : '' }}</a>
                    </el-menu-item>
                </template>
            </el-menu>
         </div>
        <div class="side_down_btn" @click="sideStore.clickCollapse()">
            <img v-if="!sideStore.isCollapse" src="../assets/img/ico_4.png" alt="">
            <img v-else src="../assets/img/ico_4a.png" alt="">
        </div>
    </div>
</template>
<style>
:root {
    --el-menu-active-color: #fff;
    --el-menu-text-color: #a6acb5;
    --el-menu-hover-text-color: #fff;
    --el-menu-bg-color: rgba(3, 22, 40, 1);
    --el-menu-hover-bg-color: #2c3752;
    --el-menu-item-height: 52px;
    --el-menu-sub-item-height: 52px;
    --el-menu-horizontal-height: 52px;
    --el-menu-horizontal-sub-item-height: 36px;
    --el-menu-item-font-size: 16px;
    --el-menu-item-hover-fill: red;
    --el-menu-border-color: none;
    --el-menu-base-level-padding: 16px;
    --el-menu-level-padding: 25px;
    --el-menu-icon-width: 17px;
}
</style>
<style scoped lang="scss">

.sub_nav{
    position: relative;
    margin-left: 14px;
    &::after{
        content: '';
        position: absolute;
        top:22px;
        left:-12px;
        width: 6px;
        height: 6px;
        background: #818B93;
        border-radius: 50%;
    }
}
.el-menu-item.is-active{
    background: #2E70D5;
    color:#fff;
    &::after{
        background: #fff;
    }
}
.el-menu-item.is-active .sub_nav::after{
    background: #fff;
}
.el-sub-menu.is-opened{
    background: #222a3c;
}
::v-deep .el-sub-menu.is-opened ul.el-menu{
    background: #222a3c;
}

.ico_m{
    flex-shrink: 0;
    width: 17px;
    margin-right: 9px;
    opacity: 0.6;
}

.side_menu{
    height: 100%;
    overflow-y: auto;
}
.side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    height: 100%;
    background: rgba(3, 22, 40, 1);
    z-index: 99;
    transition: all 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &.big{
        width: 200px;
    }
    &.sub{
        width: 50px;
        .logo{
            h1{
                display: none !important;
            }
        }
        .title{
            strong{
                display: none !important;
            }
            .icon{
                display: none;
            }
        }
        
    }
    li{
        margin-bottom: 1px;
        &.hover{
            background: #222A3C;
            .title{
                strong{
                    color:#fff;
                }
                .ico_m{
                    opacity:1;
                }
            }
        }
    }
    .side_down_btn{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: #012241;
        img{
            display: block;
            width: 20px;
            cursor: pointer;
        }
    }
    .side_nav{
        height: 100%;
        overflow-y: auto;
        .cont{
            a{
                display: block;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                color: #818B93;
                text-decoration: none;
                padding-left:60px;
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    top:17px;
                    left:45px;
                    width: 6px;
                    height: 6px;
                    background: #818B93;
                    border-radius: 50%;
                }
                &:hover{
                    background: #222A3C;
                }
                &.hover{
                    color:#fff;
                    background: #2E70D5;
                    &::after{
                        background:#fff;
                    }
                }
            }
        }
        .title{
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:0 10px 0 16px;
            cursor: pointer;
            &:hover{
                background: #222A3C;
            }
            
            strong{
                display: block;
                width: 100%;
                font-size: 16px;
                color: #A6ACB5;
                line-height: 17px;
            }
        }
    }
    .logo{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 56px;
        background: rgba(1, 34, 65, 1);
        img{
            flex-shrink: 0;
            display: block;
            width: 28px;
            border-radius: 5px;
        }
        h1{
            font-weight: bold;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 24px;
            height: 24px;
            overflow: hidden;
            padding-left:5px;
        }
    }
    .firm{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        color: #FFFFFF;
        line-height: 55px;
        height: 55px;
        margin: 0 10px;
        border-bottom: 1px solid rgba(81, 107, 131, 1);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
    
}
</style>